const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//配置文件本身就是一个commonjs的代码，所以所有在代码中能做的是在这个配置文件里都可以做
module.exports = {

    devtool: 'inline-source-map',//使用source-map进行调试

    // entry: './path/to/my/entry/file.js',//入口
    entry: {
        // main: './src/index.js',//上面是下面的简写，entry是支持多个入口的

        app: './src/index.js',
        // another: './src/another-module.js'
    },

    //output只允许有一个，如果是多入口的功能，可以使用替代父来表明不同文件的名字：https://webpack.js.org/configuration/output/#output-filename
    output: {
        path: path.resolve(__dirname, '../dist'),//http://www.jb51.net/article/58295.htm,将dist位置解析成一个绝对路径
        chunkFilename: '[name].bundle.js',//用来定义非入口的模块（没有定义在entry中的）
        filename: '[name].bundle.js',//需要动态添加输出文件的名字
    },

    //webpack将所有的资源都视为一个模块，但是本身只认识js，所以需要依赖一些loader
    module: {
        rules: [
            //改用下面的插件将css样式抽取出来
            /*            {
             test: /\.css$/,
             use: [
             'style-loader',
             'css-loader'
             ]
             },*/
            {
                //https://webpack.js.org/plugins/extract-text-webpack-plugin/
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    //如果有这个设置则不用在添加.babelrc
                    options: {
                        presets: ['es2015'],
                        plugins: ['syntax-dynamic-import']
                        //http://babeljs.io/docs/plugins/#plugin-preset-options
                        //https://segmentfault.com/a/1190000008787672
                        // 想要在babel中使用动态代码引入，必须使用这个插件
                    }
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
            /*            {test: /\.txt$/, use: 'raw-loader'},
             {test: /\.ts$/, use: 'ts-loader'}*/
        ]
    },
    plugins: [

        //所有插件的使用都需要先require或者import引进来，然后在new，同一个插件可以被new多次
        new CleanWebpackPlugin([path.resolve(__dirname, '../dist')], {
            root: path.resolve(__dirname, '../')//设置根路径（这里必须是绝对路径）
        }),

        new HtmlWebpackPlugin({template: './src/index.html'}),

        new ManifestPlugin(),

        //将样式文件抽取出来
        new ExtractTextPlugin("styles.css"),
    ]
};
